@import url('https://fonts.googleapis.com/css?family=Kanit');

.menu {
  font-family: Kanit;
  min-width: 330px;
  color: #fff;
  position: absolute;
  padding: 8px;
  background: #272626;
}

.menu .head {
  background: #272626;
  text-align: center;
  height: 30px;
  color: #E5E5E5;
  font-weight: 500;
  line-height: 27px;
  font-size: 13px;
}

.menu .menu-items {
  max-height: 528px;
  overflow-y: auto;
  font-weight: 500;
  background: #272626;
}

.menu .menu-items .menu-item {
  display: block;
  padding: 7px;
  font-size: 15px;
  color: #cccccc;
  text-align: left;
  text-indent: 5px;
  margin-top: 3px;
  background: #272626;
  border: 2px solid #E5E5E5;
  color: #E5E5E5;
}

.menu .menu-items .menu-item.selected {
  background: #E5E5E5;
  border: 2px solid #E5E5E5;
  color: #272626;
}



.head {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap; 
  margin-left: 10px;
  margin-right: 10px;
}

.head > span {
  position: relative;
  display: inline-block;
}

.head > span:before,
.head > span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: #727272;
}

.head > span:before {
  right: 100%;
  margin-right: 15px;
}

.head > span:after {
  left: 100%;
  margin-left: 15px;
}



.menu.align-left {
  left: 40;
  top: 50%;
  transform: translate(0, -50%);
}

.menu.align-top-left {
  left: 40;
  top: 40;
}

.menu.align-top {
  left: 50%;
  top: 40;
  transform: translate(-50%, 0);
}

.menu.align-top-right {
  right: 10;
  top: 40;
}

.menu.align-right {
  right: 40;
  top: 50%;
  transform: translate(0, -50%);
}

.menu.align-bottom-right {
  right: 40;
  bottom: 40;
}

.menu.align-bottom {
  left: 50%;
  bottom: 40;
  transform: translate(-50%, 0);
}

.menu.align-bottom-left {
  left: 40;
  bottom: 40;
}

.menu.align-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* WebKit scrollbar properties */
::-webkit-scrollbar {
  width: 8px;
  border-left: 4px solid #272733;
}
::-webkit-scrollbar-track {
    background: #2a2a38;
  border-left: 4px solid #272733;
}
::-webkit-scrollbar-thumb {
    background: #333344; 
  border-left: 4px solid #272733;
}
::-webkit-scrollbar-thumb:hover {
    background: #333344;
  border-left: 4px solid #272733;
}